<template>
  <div>
    <canvas id="text_canvas" ref="myCanvas" style="border:1px solid #c3c3c3;  border-radius: 10px;"></canvas>
  </div>
</template>
<script>
import CanvasCommVue from "../../utils/CanvasComm.vue";
let windowHeight = parseInt(window.innerHeight);
let windowinnerWidth = parseInt(window.innerWidth);

export default {
  data() {
    return {
      context: {},
      cans: [1, 2, 3],
      x: 0,
      y: 0,
      mwidth: 0,
      mheight: 0,
      moveFlag: false,
      clickFlag: false,
      testCanvas: {},
      bodyHeight: "",
      bodywt: ""
    };
  },
  mounted() {
    this.bodyHeight = windowHeight - 125;
    this.bodywt = windowinnerWidth - 285;
    const canv = this.$refs["myCanvas"];
    this.context = canv.getContext("2d");
    this.initCanvas(canv);
  },
  methods: {
    initCanvas(canv) {
      let cav = CanvasCommVue;
      canv.width = this.bodywt;
      canv.height = this.bodyHeight;
      this.context.lineWidth = 2;
      cav.$round(this.context, 60, 75, 50, 0, Math.PI * 2, true, true, "red");
      this.context.lineWidth = 2;
      this.context.strokeStyle = "blue";
      this.context.fillStyle = "red";
      cav.$roundRect(this.context, 3, 125, 120, 70, 5, true, "blue");
    }
  }
};
</script>